<template>
  <div class="container">
    <el-form :inline="true">
      <el-form-item>
        <el-input
          v-model="pageGrid.orderNo"
          placeholder="内部订单号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="pageGrid.status" placeholder="请选择审批状态">
          <el-option label="待审批" value="0"></el-option>
          <el-option label="通过" value="1"></el-option>
          <el-option label="拒绝" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="pageGrid.month"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <div class="d-flex">
          <el-button type="primary" @click="getData">搜索</el-button>
          <el-button @click="clearSearch">重置</el-button>

          <el-button @click="excelExport" type="primary" icon="el-icon-files"
            >导出</el-button
          >
        </div>
      </el-form-item>
    </el-form>
    <el-table v-loading="isLoading" :data="tableData" border class="table">
      <el-table-column
        prop="orderNo"
        label="内部订单号"
        width="130"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="number"
        label="模具编号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="specs"
        label="规格"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="useSpecs"
        label="可做规格"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="angle"
        label="角度"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="equipmentName"
        label="设备名称"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="equipmentNumber"
        label="设备编号"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="production"
        label="工艺"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="resetProduction"
        label="重置工艺"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="shellSize"
        label="外壳尺寸"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="roughSupplier"
        label="原石供应商"
        width="100"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="roughItemNo"
        label="原石料号"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="compressUp"
        label="公差上限"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="compressDown"
        label="公差下限"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="compressUp"
        label="压缩角公差上限"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="compressDown"
        label="压缩角公差下限"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="dingjingUp"
        label="定径公差上限"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="dingjingDown"
        label="定径公差下限"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="laserParamUp1"
        label="激光参数-上限1"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="laserParamUp2"
        label="激光参数-上限2"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="laserParamDown1"
        label="激光参数-下限1"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="laserParamDown2"
        label="激光参数-下限2"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="laserParamAngle"
        label="激光参数-角度"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="staffName"
        label="申请人"
        align="center"
      ></el-table-column>
      <el-table-column prop="reason" label="退库原因" align="center">
        <template slot-scope="scope">
          <span>{{
            scope.row.reason ? rejectReasonObj[scope.row.reason] : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="申请时间"
        width="140"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="dept"
        label="责任部门"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="checkPersonName"
        label="审核员"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="checkTime"
        width="140"
        label="审核时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="status"
        label="审批状态"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="140">
        <template slot-scope="scope">
          <el-button
            v-if="
              (scope.row.status == '待审核' ||
                scope.row.status == '待仓库审核') &&
              (isQC || isWarehouse || isTechnology)
            "
            type="text"
            @click="showDialog(scope.row)"
            >审批</el-button
          >
          <el-button type="text" @click="showPrint(scope.row)">打印</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageGrid.pageNo"
        :page-sizes="pageSizeArr"
        :page-size="pageGrid.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="审批" :visible.sync="dialogVisible" width="600px">
      <el-form
        :model="examine"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
      >
        <el-form-item label="审批状态" prop="status">
          <el-select v-model="examine.status" placeholder="请选择审批状态">
            <el-option label="通过" value="1"></el-option>
            <el-option label="拒绝" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前工艺" prop="status">
          <el-input
            v-model="examine.currentProduction"
            disabled="true"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>

        <el-form-item label="退料规格" prop="specs">
          <el-input
            v-model="examine.specs"
            disabled="true"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="(计划部门)工艺流程"
          v-if="examine.status != '2' && isWarehouse"
        >
          <el-select v-model="examine.production" placeholder="请选择">
            <el-option
              :label="item"
              :value="item"
              v-for="item in productions"
              :key="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" v-if="examine.status != '2' && isWarehouse">
          <el-input
            v-model="examine.remark"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 补料申请打印 -->
    <el-dialog title="" :visible.sync="printDialogVisible" width="800px">
      <el-form
        :model="replenishment"
        :rules="rules"
        class="ruleForm"
        ref="ruleForm"
        label-width="120px"
        id="printMe"
      >
        <div class="class_title">补料申请单</div>
        <div class="line">
          <div class="line-left">
            <el-form-item label="客户">
              <el-input
                v-model="replenishmentParams.customer"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="客户订单号">
              <el-input
                v-model="replenishmentParams.custOrderNo"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="line">
          <div class="line-left">
            <el-form-item label="订单号">
              <el-input v-model="replenishment.orderNo" disabled></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="模具编号">
              <el-input v-model="replenishment.number" disabled></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="规格">
              <el-input v-model="replenishment.specs" disabled></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="工艺">
              <el-input v-model="replenishment.production" disabled></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="line">
          <div class="line-left">
            <el-form-item label="原石供应商">
              <el-input
                v-model="replenishment.roughSupplier"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="原石料号">
              <el-input
                v-model="replenishmentParams.rough_item_no"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="公差上限">
              <el-input
                v-model="replenishmentParams.tolerance_up"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="公差下限">
              <el-input
                v-model="replenishmentParams.tolerance_down"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="压缩角公差上限">
              <el-input
                v-model="replenishmentParams.compress_up"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="压缩角公差下限">
              <el-input
                v-model="replenishmentParams.compress_down"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="定经公差上限">
              <el-input
                v-model="replenishmentParams.dingjing_up"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="定经公差下限">
              <el-input
                v-model="replenishmentParams.dingjing_down"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="外壳尺寸">
              <el-input
                v-model="replenishmentParams.shell_size"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="激光参数-角度">
              <el-input
                v-model="replenishmentParams.laser_param_angle"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="激光参数-上限1">
              <el-input
                v-model="replenishmentParams.laser_param_up1"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="激光参数-上限2">
              <el-input
                v-model="replenishmentParams.laser_param_up2"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="激光参数-下限1">
              <el-input
                v-model="replenishmentParams.laser_param_down1"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="激光参数-下限2">
              <el-input
                v-model="replenishmentParams.laser_param_down2"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="责任部门">
              <el-input v-model="replenishment.dept" disabled></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="不良原因">
              <el-input v-model="replenishment.reason" disabled></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="责任设备">
              <el-input
                v-model="replenishment.equipmentName"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="设备编号">
              <el-input
                v-model="replenishment.equipmentNumber"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="可做规格">
              <el-input v-model="replenishment.useSpecs" disabled></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="角度">
              <el-input v-model="replenishment.angle" disabled></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="printDialogVisible = false">取 消</el-button>
        <el-button
          v-print="'#printMe'"
          type="primary"
          @click="printDialogVisible = false"
          >确定打印</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from "../../../api";
import commonInfo from "@/utils/common";
import { OrderRejectReasonObj, RoleType } from "../../common/enum";
import { exportInfo } from "@/utils/export";
import host from "@/utils/host";
import flowVue from "../circulation/flow.vue";
export default {
  name: "replenishment",
  data() {
    return {
      exportExcelUrl: host.host + "excel/open/replenishmentExport",
      isExport: false,
      pageSizeArr: commonInfo.pageSizeArr,
      isLoading: false,
      tableData: [],
      total: 0,
      pageGrid: {
        pageNo: 1,
        pageSize: 10,
        month: null,
        orderNo: null,
        status: null,
      },
      dialogVisible: false,
      examine: {
        status: "",
        specs: "",
        production: "",
        remark: "",
        currentProduction: "",
      },
      productions: [],
      rejectReasonObj: {},
      rules: {
        specs: [{ required: true, message: "请选择", trigger: "change" }],
        status: [{ required: true, message: "请选择", trigger: "change" }],
        production: [{ required: true, message: "请选择", trigger: "change" }],
        remark: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      id: null,
      isBusiness: false, // 业务
      isQC: false, // 业务
      isPlan: false, // 业务
      isTechnology: false, // 业务
      isAdmin: false,
      isProduction: false,
      isWarehouse: false,
      printDialogVisible: false,
      replenishmentParams: {},
      replenishment: {
        angle: "",
        customer: "",
        checkPerson: "",
        checkPersonName: "",
        equipmentName: "",
        equipmentNumber: "",
        checkTime: "",
        createTime: "",
        dept: "",
        number: "",
        operator: "",
        operatorName: "",
        orderNo: "",
        production: "",
        reason: "",
        remark: "",
        specs: "",
        staffId: "",
        staffName: "",
        staffNo: "",
        status: "",
        useSpecs: "",
      },
    };
  },
  created() {
    this.getData();
    this.rejectReasonObj = OrderRejectReasonObj;
    let user = sessionStorage.getItem("adminUserInfo");
    if (user) {
      user = JSON.parse(user);
      this.isBusiness = user.role === RoleType.Business;
      this.isQC = user.role === RoleType.QC;
      this.isPlan = user.role === RoleType.Plan;
      this.isTechnology = user.role === RoleType.Technology;
      this.isProduction = user.role === RoleType.Production;
      this.isAdmin = user.role === RoleType.Admin;
      this.isWarehouse = user.role === RoleType.Warehouse;
    }
  },
  methods: {
    showPrint(row) {
      api
        .queryReplenishmentParams({ orderNo: row.orderNo, specs: row.specs })
        .then((res) => {
          console.info("补料参数");
          console.info(res.data);
          this.replenishmentParams = res.data;
        });

      this.printDialogVisible = true;
      this.replenishment.angle = row.angle;
      this.replenishment.customer = row.customer;
      this.replenishment.checkPerson = row.checkPerson;
      this.replenishment.checkPersonName = row.checkPersonName;
      this.replenishment.equipmentName = row.equipmentName;
      this.replenishment.equipmentNumber = row.equipmentNumber;
      this.replenishment.checkTime = row.checkTime;
      this.replenishment.createTime = row.createTime;
      this.replenishment.dept = row.dept;
      this.replenishment.number = row.number;
      this.replenishment.operator = row.operator;
      this.replenishment.operatorName = row.operatorName;
      this.replenishment.orderNo = row.orderNo;
      this.replenishment.production = row.production;
      this.replenishment.reason = row.reason;

      this.replenishment.remark = row.remark;
      this.replenishment.specs = row.specs;
      this.replenishment.staffId = row.staffId;
      this.replenishment.staffName = row.staffName;
      this.replenishment.staffNo = row.staffNo;
      this.replenishment.status = row.status;
      this.replenishment.useSpecs = row.useSpecs;
      this.replenishment.roughSupplier = row.roughSupplier;
      this.replenishment.equipmentName = row.equipmentName;
      this.replenishment.equipmentNumber = row.equipmentNumber;
      this.replenishment.reason = row.reason;
    },

    getData() {
      console.info("查询参数");
      console.info(this.pageGrid);
      this.isLoading = true;
      api
        .replenishmentPage(this.pageGrid)
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.totalElement;
            this.total = res.total;
            this.isLoading = false;
          }
        })
        .catch((this.isLoading = false));
    },
    excelExport() {
      this.isExport = true;
      let info = {
        method: "GET",
        url: this.exportExcelUrl,
        responseType: "blob",
        type: "excel",
        name: "补料申请",
        params: this.pageGrid,
      };
      exportInfo(info).then((res) => {
        this.isExport = false;
      });
    },
    getOrderProductions(row) {
      api
        .getOrderProductions({ orderNo: row.orderNo, specs: row.specs })
        .then((res) => {
          if (res.code === 200) {
            this.productions = res.data;
          }
        })
        .catch();
    },
    showDialog(row) {
      console.info(row);
      this.examine = {
        status: "",
        production: "",
        remark: "",
        specs: row.specs,
        currentProduction: row.production,
      };
      this.id = row.id;
      this.getOrderProductions(row);
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            ...this.examine,
            id: this.id,
          };
          console.info(param);
          api.replenishmentCheck(param).then((res) => {
            if (res.code === 200) {
              this.dialogVisible = false;
              this.getData();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    clearSearch() {
      this.pageGrid = {
        pageNo: 1,
        pageSize: 10,
        parameter: {
          orderNo: null,
          account: null,
          month: null,
        },
      };
      this.getData();
    },
    //分页
    handleCurrentChange(val) {
      this.pageGrid.pageNo = val;
      this.getData();
    },
    //分页
    handleSizeChange(val) {
      this.pageGrid.pageSize = val;
      this.getData();
    },
  },
};
</script>

<style scoped lang="less">
.upload-demo {
  height: 32px;
  display: inline-block;
  margin-left: 10px;
}
.el-select > .el-input {
  display: block;
  width: 178px;
}
.line {
  display: block;
  width: 600px;
}
.ruleForm {
  width: 400px;
}

.el-select {
  display: inline-block;
  position: relative;
  width: 178px !important;
}
.line-left {
  display: inline-block !important;
  width: 300px;
}
.line-right {
  display: inline-block !important;
  width: 300px;
}

.el-select {
  display: inline-block;
  position: relative;
  width: 200px;
}

.class_title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  margin-left: 70%;
}
</style>
